<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/27
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户展示模块</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
    <style type="text/css">
        .layui-table-cell{
            height:auto!important;
            white-space:normal;
        }

    </style>
</head>
<body>
<!--搜索框-->
<div class="layui-inline">
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="userTelphone" id="search" placeholder="请填写手机号"/>
    </div>
</div>
<button class="layui-btn layui-btn-sm" id="searchBtn">搜索</button>
<!--展示表格-->
<table id="myTable" lay-filter="tableFilter"></table>
<!--表格显示图片-->
<script type="text/html" id="showImg">
    <img src="${pageContext.request.contextPath}/user/{{d.userImage}}"  height="100" width="200"/>
</script>
<!--toolbar组件-->
<script type="text/html" id="bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">修改状态</button>
    </div>
</script>

<!--layui代码-->
<script>
    layui.use(['table'],function () {
        var table = layui.table;
        var $ = layui.$;
        //1、渲染表格
        var tableIns = table.render({
            elem:'#myTable',
            url:'${pageContext.request.contextPath}/cmfzUser/show',
            page:true,
            limit:8,
            limits:[8,9,10],
            cols:[[
                {field:'userId',title:'编号',sort:true,width:80},
                {field:'userName',title:'姓名',sort:true,width:80},
                {field:'userTelphone',title:'手机号',sort:true,width:80},
                {field:'userImage',title:'头像',templet:'#showImg'},
                {field:'userNickname',title:'昵称',sort:true,width:80},
                {field:'userSex',title:'性别',templet:function (u) {
                        if(u.userSex=='男'){
                            return '男'
                        }else {
                            return '女'
                        }
                    }},
                {field:'userAutograph',title:'签名',sort:true,width:80},
                {field:'userStatus',title:'状态',templet:function (g) {
                        if(g.userStatus==0){
                            return '正常'
                        }else {
                            return '冻结'
                        }
                    }},
                {field:'userCreateDate',title:'注册时间',sort:true,width:80},
                {title:'操作',toolbar:'#bar'}
            ]]
        })
        //2、搜索操作
        $('#searchBtn').click(function () {
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    userTelphone: $('#search').val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        })
        //3、修改状态  监听头工具栏事件
        table.on('tool(tableFilter)',function (obj) {
            if(obj.event=='update'){
                $.ajax({
                    url:'${pageContext.request.contextPath}/cmfzUser/update',
                    data:'userId='+obj.data.userId,
                    success:function (result) {
                        if(result.flag){
                            layer.msg('修改成功');
                            tableIns.reload();
                        }else{
                            layer.msg('修改失败')
                        }
                    }
                })
            }
        })
    })
</script>
</body>
</html>
